<template>
  <div class="home">
    <HelloWorld
      :on-refresh="onRefresh"
      :on-infinite="onInfinite"
      :enableInfinite="isEnd"
    >
      <ul>
        <li v-for="(item, index) in Num" :key="index">{{ item }}</li>
      </ul>
    </HelloWorld> 
    <ul>
      <li v-for="(item,index) in authList" :key="index">{{item.id}}----------{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      Num: 50,
      isEnd: false,
      list: [
        {
          name: "哈哈",
          id: 1,
          age: "20",
        },
        {
          name: "哈哈哈哈",
          id: 2,
          age: "232",
        },
      ],
      list1: [
        {
          name: "哈哈",
          id: 1,
          age: "20",
        },
      ],
      authList:[]
    };
  },
  methods: {
    onRefresh(done) {
      console.log("我刷新了");
      setTimeout(() => {
        done();
      }, 2000);
    },
    onInfinite(done) {
      console.log("我到底了");
      setTimeout(() => {
        done();
        this.Num += 40;

        if (this.Num > 500) {
          this.isEnd = true;
        }
      }, 3000);
      console.log(" this.Num ", this.Num);
    },
    toChangeCount(){
    this.authList=   this.list.filter(item=>{
        return this.list1.some(x=>x.id===item.id)
      })
    }
  },
};
</script>
